<template>
  <view class="p-h24 p-b24 bot-confirm">
    <view class="p-v40 flex">
      <text class="text-700-132">{{ id ? "通知" : "邀请" }}面试</text>
    </view>
    <swiper
      class="swiper-viewer"
      indicator-dots
      :current="current"
      @change="handleChange"
    >
      <swiper-item v-for="(info, index) in list">
        <view class="flex">
          <!-- <image class="square-148 r-10" :src="info.images" mode="aspectFill" /> -->
          <view class="flex-1 p-l20 overflow-hidden">
            <view class="flex">
              <text class="text-700-128 flex-1 truncate"
                >{{ info.title }} {{ info.fringe }}</text
              >
              <text class="text-700-528">{{ info.money_range }}</text>
            </view>
            <view class="flex m-t12">
              <view class="flex p-h10 m-r10 r-4 h-44 tag">
                <text class="text-400-324">{{ info.area }}</text>
              </view>
              <view class="flex p-h10 m-r10 r-4 h-44 tag">
                <text class="text-400-324">{{ info.lowest_education }}</text>
              </view>
            </view>
            <view class="flex m-t12 overflow-hidden">
              <text class="text-400-326 flex-1 truncate">{{
                info.address
              }}</text>
              <text class="text-400-326">{{ info.times }} 发布</text>
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>
    <view class="relative m-b20 title">
      <text class="text-700-132">面试时间确认</text>
    </view>
    <view class="m-b40 bg-1 r-10 p-a30">
      <view class="flex">
        <text class="text-400-128">日期：</text>
        <view
          class="flex-1 p-h20 h-80 flex-sb field"
          @click="openPicker('date')"
        >
          <text v-if="pickedDate" class="text-400-128">{{ pickedDate }}</text>
          <text v-else class="text-400-328">请选择</text>
          <image
            class="square-36"
            src="/static/images/public/calendar.png"
            mode="aspectFit"
          ></image>
        </view>
      </view>
      <view class="flex m-t20">
        <text class="text-400-128">时间：</text>
        <view
          class="flex-1 p-h20 h-80 flex-sb field"
          @click="openPicker('time')"
        >
          <text v-if="pickedTime" class="text-400-128">{{ pickedTime }}</text>
          <text v-else class="text-400-328">请选择</text>
          <image
            class="square-36"
            src="/static/images/public/clock.png"
            mode="aspectFit"
          ></image>
        </view>
      </view>
    </view>
    <view class="m-t50 flex">
      <view class="r-10 flex-c flex-1 h-76 confirm-btn" @click="jump">
        <text class="text-700-228">{{ id ? "通知" : "邀请" }}</text>
      </view>
    </view>
    <up-notify ref="uNotify"></up-notify>
    <up-datetime-picker
      :show="showPicker"
      v-model="pickedValue"
      :mode="pickerMode"
      closeOnClickOverlay
      @cancel="closePicker"
      @close="closePicker"
      @confirm="onConfirm"
    ></up-datetime-picker>
  </view>
</template>

<script lang="ts" setup>
import { defineEmits, ref, nextTick } from "vue";
import { timeFormat } from "@/utils/utils";
const props = defineProps({
  id: {
    type: String,
    default: "",
  },
  user_id: {
    type: String,
    default: "",
  },
});
const showPicker = ref(false);
type PickerMode = "date" | "time";
const pickerMode = ref<PickerMode>("date");
const pickedValue = ref("");
const pickedDate = ref("");
const pickedTime = ref("");
const current = ref(0);
const uNotify = ref();
const list = ref([]);
const emit = defineEmits<{
  (e: "close"): void;
}>();

function notifyMessage(title: string) {
  uNotify.value.show({
    top: 10,
    type: "error",
    color: "#fff",
    bgColor: "##F87470",
    message: title,
    duration: 1000 * 3,
    fontSize: 16,
    safeAreaInsetTop: true,
  });
}
//动态监听
const handleChange = (e) => {
  current.value = e.detail.current;
};
//提交
const jump = async () => {
  console.log(current.value);
  console.log(list.value[current.value]);
  if (!pickedDate.value) {
    return notifyMessage("请选择日期");
  }
  if (!pickedTime.value) {
    return notifyMessage("请选择时间");
  }
  let res = null;
  if (props.id) {
    const data = {
      td_id: props.id,
      date: pickedDate.value,
      time: pickedTime.value,
    };
    res = await uni.$u.post("/resume/mianshi", data);
  } else {
    const data = {
      position_id: list.value[current.value].id,
      user_id: props.user_id,
      dates: pickedDate.value,
      times: pickedTime.value,
    };
    res = await uni.$u.post("/position/invateInterview", data);
  }

  if (res.code == 1) {
    uni.showToast({ title: res.msg });
    emit("close");
  } else {
    notifyMessage(res.msg);
  }
};
//弹窗
const openPicker = (mode: PickerMode) => {
  pickerMode.value = mode;

  let picked = "";

  if (mode === "date") {
    const date = pickedDate.value ? +new Date(pickedDate.value) : +Date.now();
    picked = timeFormat(date);
  } else if (mode === "time") {
    const dateTime = pickedTime.value
      ? new Date(`${timeFormat(Date.now())} ${pickedTime.value}`)
      : Date.now();
    picked = timeFormat(+dateTime, "hh:MM");
  }

  pickedValue.value = picked;
  nextTick(() => {
    showPicker.value = true;
  });
};
//关闭
const closePicker = () => {
  showPicker.value = false;
};
//确认
const onConfirm = (e: any) => {
  pickedValue.value = e.value;
  if (e.mode === "date") {
    pickedDate.value = timeFormat(+new Date(e.value));
  } else {
    pickedTime.value = e.value;
  }
  showPicker.value = false;
};
//获取列表
async function getList() {
  const res = await uni.$u.get("/position/mylst");
  list.value = res.data;
}
getList();
</script>

<style lang="scss" scoped>
.swiper-viewer {
  height: 100px;
}

.bot-confirm {
  width: 100vw;
}

.tag {
  background-color: $bg-color-6;
}

.confirm-btn {
  background-color: $bg-color-2;
}
</style>
